/**
 * Created by Freeman on 2017/11/4.
 */
/**
 * Created by Freeman on 2017/11/3.
 */

import React, {Component} from 'react';
import {StyleSheet, Text, TextInput, TouchableOpacity, View} from 'react-native';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {login} from '../../../store/auth/actions';
import {COLOR} from '../../../config/index';
import Ionicons from 'react-native-vector-icons/Ionicons';
import NavigationItem from '../../base/NavigationItem'

class Login extends Component {
  static navigationOptions = ({navigation}: any) => ({
    headerRight: (
      <NavigationItem
        title="注册"
        onPress={() => navigation.navigate('Register')}
      />
    ),
    headerStyle: {backgroundColor: 'white'}
  });

  constructor(props) {
    super(props);
    this.onButtonPress = this.onButtonPress.bind(this);
    this.state = {
      username: '',
      password: ''
    };
  }

  onButtonPress() {
    const {loginAction, navigation} = this.props;
    loginAction(this.state).then(() => {
      navigation.goBack();
    });
  }

  componentWillMount() {
    const {auth} = this.props;

    if (auth.isLogged) {
      this.props.navigation.navigate('Home');
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.title}>
          <Text style={styles.titleText}>手机号登录</Text>
        </View>
        <View style={styles.formContainer}>
          <View style={styles.formItem}>
            <Ionicons name="ios-person" size={26} style={styles.inputIcon}/>
            <TextInput
              style={styles.input}
              onChangeText={username => this.setState({username})}
              value={this.state.username}
              keyboardType="numeric"
              placeholder="请填写手机号"
              placeholderTextColor="#dbdbdb"
            />
          </View>
          <View style={styles.formItem}>
            <Ionicons name="ios-lock" size={26} style={styles.inputIcon}/>
            <TextInput
              style={styles.input}
              onChangeText={password => this.setState({password})}
              value={this.state.password}
              placeholder="请填写密码"
              placeholderTextColor="#dbdbdb"
              secureTextEntry
            />
          </View>
        </View>
        <TouchableOpacity onPress={this.onButtonPress}>
          <View style={styles.button}>
            <Text style={styles.buttonText}>登录</Text>
          </View>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: COLOR.backgroundLighter
  },
  close: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    width: '100%'
  },
  iconClose: {
    marginRight: 20
  },
  title: {
    marginTop: 20,
    marginBottom: 20,
    flexDirection: 'row',
    justifyContent: 'center'
  },
  titleText: {
    fontSize: 40
  },
  formContainer: {
    margin: 40
    //alignItems: 'center',
  },
  formItem: {
    padding: 5,
    flexDirection: 'row',
    alignItems: 'center',
    borderTopWidth: 1,
    borderColor: COLOR.linePrompt
  },
  inputIcon: {
    width: 30,
    textAlign: 'center',
    color: COLOR.textEmpha
  },
  input: {
    //flex: 1,
    height: 40,
    width: 300,
    fontSize: 14,
    color: COLOR.textEmpha
  },
  button: {
    marginBottom: 30,
    width: 300,
    borderRadius: 3,
    alignItems: 'center',
    backgroundColor: COLOR.theme
  },
  buttonText: {
    padding: 20,
    color: 'white'
  }
});

const mapStateToProps = state => {
  return {
    auth: state.auth
  };
};

const mapDispatchToProps = dispatch => ({
  loginAction: bindActionCreators(login, dispatch)
});

export default connect(mapStateToProps, mapDispatchToProps)(Login);
